<template>
  <div class="meal">
    <div class="title">
      <h3>打包活动</h3>
    </div>
    <div class="ele-div-btn">
      <el-button type="primary" @click="addActive">添加活动</el-button>
    </div>
    <div class="ment-div-table">
      <el-tabs v-model="activeTabs" @tab-click="tabClick">
        <el-tab-pane label="上架" name="up">
          <el-table
            ref="elTable"
            :data="tableBind"
            :fit="true"
            @selection-change="selectChange"
          >
            <el-table-column type="selection" fixed="left" width="50" />
            <el-table-column label="活动名称" prop="activeName" />
            <el-table-column label="累计参与购买人数" prop="joinPeople" />
            <el-table-column label="开始时间" prop="starTime" />
            <el-table-column label="结束时间" prop="endTime" />
            <el-table-column label="操作" fixed="right" width="300">
              <template slot-scope="scope">
                <span>
                  <el-button
                    type="danger"
                    @click="operation(scope)"
                  >下架</el-button>&nbsp;
                </span>
                <span>
                  <el-button
                    type="text"
                    @click="operation(scope)"
                  >查看详情</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="下架" name="low">
          <el-table
            ref="elTable"
            :data="tableBind"
            :fit="true"
            @selection-change="selectChange"
          >
            <el-table-column type="selection" fixed="left" width="50" />
            <el-table-column label="套餐名称" prop="activeName" />
            <el-table-column label="累计参与购买人数" prop="joinPeople" />
            <el-table-column label="结束时间" prop="endTime" />
            <el-table-column label="操作" fixed="right" width="300">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  @click="operation(scope,'serviceCity')"
                >删除</el-button>&nbsp;
                <el-button
                  type="text"
                  @click="operation(scope)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="ele-div-footer">
      <div class="footer-left">
        <el-button plain size="small" @click="allSelection">全选</el-button>
        <el-button plain size="small" @click="allSelection">下架</el-button>
      </div>
      <el-pagination
        class="pagination-right"
        :page-sizes="[15, 20, 25, 30]"
        :page-size="15"
        :total="400"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Meal',
  data() {
    return {
      activeTabs: 'up',
      form: {
        activeType: '1',
        activeCode: '1'
      },
      // table
      tableBind: [
        {
          activeName: '胎心监护仪T12活动',
          city: '苏州市',
          joinPeople: '20',
          starTime: '2019-06-24 12：00',
          endTime: '2019-06-24 12：00'
        },
        {
          activeName: '胎心监护仪T13活动',
          city: '苏州市',
          joinPeople: '0',
          starTime: '2019-06-24 12：00',
          endTime: '2019-06-24 12：00'
        },
        {
          activeName: '胎心监护仪T14活动',
          city: '苏州市',
          joinPeople: '10',
          starTime: '2019-06-24 12：00',
          endTime: '2019-06-24 12：00'
        }
      ]
    }
  },
  methods: {
    allSelection() {
      if (this.tableBind) {
        this.tableBind.forEach(inf => {
          this.$refs.elTable.toggleRowSelection(inf)
        })
      } else {
        this.$refs.elTable.clearSelection()
      }
    },
    /** tabs选项卡 */
    tabClick(e) {
      console.log(e, 'tabClick')
    },
    /* 添加套餐*/
    addActive() {
      this.$router.push('addPack')
    }
  }
}
</script>

<style lang="scss" scoped>
.meal{
  padding: 0px 100px;
  .title{
    margin-bottom: 20px;
  }
  .ele-div-btn {
    width: 100%;
    position: relative;
    ::v-deep.el-button {
      position: absolute;
      right: 0px;
      z-index: 100;
    }
  }
  .ele-div-footer {
    display: flex;
    justify-content: space-between;
    margin: 50px 0px 100px 0px;
    .footer-left {
      ::v-deep.el-button {
        width: 100px;
        margin: 0px;
      }
    }
  }
}
</style>
